<template>
  <div class="permission">
    <el-table :data="permissionData" row-key="id" border :tree-props="defaultProps" default-expand-all>
      <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
      <el-table-column label="权限标题" prop="title"></el-table-column>
      <el-table-column label="权限标识" prop="name" align="center"></el-table-column>
      <el-table-column label="状态" prop="status" width="150" align="center"></el-table-column>
      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="showAddPermissionDialog(scope.row)" :disabled="scope.row.status === '禁用'" v-if="scope.row.level < 4">{{ addBtnText(scope.row.level) }}</el-button>
          <el-button size="small" type="info" @click="showUpdatePermissionDialog(scope.row)" :disabled="scope.row.id === 28  || scope.row.status === '禁用'">编辑权限</el-button>
          <el-button size="small" type="danger" @click="showDeletePermissionDialog(scope.row)" :disabled="scope.row.id === 28 || scope.row.status === '禁用'">删除权限</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="新增权限"
      :visible.sync="isShowAddPermDialog"
      width="50%">
      <el-form label-width="80px">
        <el-form-item label="权限标识">
          <el-input placeholder="请输入权限标识" v-model="permDataSave.name"></el-input>
        </el-form-item>
        <el-form-item label="权限标题">
          <el-input placeholder="请输入标题" v-model="permDataSave.title"></el-input>
        </el-form-item>
        <el-form-item label="权限图标">
          <el-input placeholder="请输入权限图标" v-model="permDataSave.icon"></el-input>
        </el-form-item>
        <el-form-item label="路由路径">
          <el-input placeholder="请输入路由路径" v-model="permDataSave.path"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="permDataSave.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click='isShowAddPermDialog = false;permDataSave = {title:"",name:"",status:1,level:0,type:0,pid:0,icon:"",path:""}'>取 消</el-button>
        <el-button type="primary" @click="handleAddPermission">确 定</el-button>
      </span>
    </el-dialog>

     <el-dialog
      title="更新权限"
      :visible.sync="isShowUpdatePermDialog"
      width="50%">
      <el-form label-width="80px">
        <el-form-item label="权限标识">
          <el-input placeholder="请输入权限标识" v-model="permDataSave2.name"></el-input>
        </el-form-item>
        <el-form-item label="权限标题">
          <el-input placeholder="请输入标题" v-model="permDataSave2.title"></el-input>
        </el-form-item>
        <el-form-item label="权限图标">
          <el-input placeholder="请输入权限图标" v-model="permDataSave2.icon"></el-input>
        </el-form-item>
        <el-form-item label="路由路径">
          <el-input placeholder="请输入路由路径" v-model="permDataSave2.path"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="permDataSave2.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click='isShowUpdatePermDialog = false;permDataSave2 = {title:"",name:"",status:1,level:0,type:0,pid:0,icon:"",path:"",id:0}'>取 消</el-button>
        <el-button type="primary" @click="handleUpdatePermission">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 删除角色弹窗 -->
    <el-dialog
      title="删除权限"
      :visible.sync=" isShowDeletePermDialog"
      width="50%">
      <span>您确认需要删除此权限？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click='isShowDeletePermDialog = false;'>取 消</el-button>
        <el-button type="primary" @click="handleDeletePermission">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapMutations,mapState } from 'vuex';
import { Message } from 'element-ui';

export default {
  name: "PermissionView",
  data(){
    return{
      permissionData:[],
      defaultProps: {
        children: "children"
      },
      isShowAddPermDialog: false,
      permDataSave:{
        title:"",
        name:"",
        status:1,
        level:0,
        type:0,
        pid:0,
        icon:"",
        path:""
      },
      isShowUpdatePermDialog: false,
      permDataSave2:{
        title:"",
        name:"",
        status:1,
        level:0,
        type:0,
        pid:0,
        icon:"",
        path:"",
        id:0
      },
      isShowDeletePermDialog: false,
    }
  },
  methods:{
    //  新增权限
    showAddPermissionDialog(obj){
      this.isShowAddPermDialog = true;
      this.setRowPermId(obj.id);
      this.setRowPermLevel(obj.level);
    },
    async handleAddPermission(){
      this.permDataSave.pid = this.rowPermId;
      this.permDataSave.level = this.rowPermLevel + 1;
      this.permDataSave.type = this.rowPermLevel <= 2 ? 0 : 1;
      console.log(this.permDataSave);
      try{
        const data = await this.permissionAdd(this.permDataSave);
        Message({
          message: data.msg,
          type: "success"
        });
      } catch (error) {
        Message({
          type: "error",
          message: error.message
        })
      } finally {
        this.isShowAddPermDialog = false;
        this.permDataSave = {title:"",name:"",status:1,level:0,type:0,pid:0,icon:"",path:""}
        this.getPermissionTreeList();
      }
    },


    //  修改权限
    showUpdatePermissionDialog(obj){
      this.isShowUpdatePermDialog = true;
      this.setRowPermForUpdate({
        pid:obj.parent_id,
        id:obj.id,
        type:obj.type,
        level:obj.level
      });
    },
    async handleUpdatePermission(){
      this.permDataSave2.id = this.rowPermForUpdate.id;
      this.permDataSave2.pid = this.rowPermForUpdate.pid;
      this.permDataSave2.level = this.rowPermForUpdate.level;
      this.permDataSave2.type = this.rowPermForUpdate.type;
      try{
        const data = await this.permissionUpdate(this.permDataSave2);
        Message({
          message: data.msg,
          type: "success"
        });
      } catch (error) {
        Message({
          type: "error",
          message: error.message
        })
      } finally {
        this.isShowUpdatePermDialog = false;
        this.permDataSave2 = {title:"",name:"",status:1,level:0,type:0,pid:0,icon:"",path:"",id:0}
        this.getPermissionTreeList();
      }
    },

    //  获取所有权限(树形)
    async getPermissionTreeList(){
      try{
        const result = await this.permissionTreeList();
        this.permissionData = result.data;
      } catch (error){
        Message({
          message: error.message,
          type: "error"
        });
      }
    },

    //  删除权限
    showDeletePermissionDialog(obj){
      this.isShowDeletePermDialog = true;
      this.setRowPermId(obj.id);
    },
    async handleDeletePermission(){
      const id = this.rowPermId;
      // console.log(id);
      try{
        const data = await this.permissionDelete({id});
        Message({
          message: data.msg,
          type: "success"
        });
      }catch(error){
        Message({
          message: error.message,
          type: "error"
        });
      }finally{
        this.isShowDeletePermDialog = false;
        this.getPermissionTreeList();
      }
    },

    addBtnText(level){
      if(level ===1 || level === 2)
        return "添加菜单"
      if(level === 3)
        return "添加功能"
    },

    
    ...mapActions("permissionStore",{
      permissionTreeList: "permissionTreeList",
      permissionAdd: "permissionAdd",
      permissionUpdate: "permissionUpdate",
      permissionDelete: "permissionDelete"
    }),
    ...mapMutations("permissionStore",{
      setRowPermId: "setRowPermId",
      setRowPermLevel: "setRowPermLevel",
      setRowPermForUpdate: "setRowPermForUpdate"
    }),
    
  },
  computed:{
    ...mapState("permissionStore",{
      rowPermId: "rowPermId",
      rowPermLevel: "rowPermLevel",
      rowPermForUpdate: "rowPermForUpdate"
    })
  },
  mounted(){
    this.getPermissionTreeList();
  }
}
</script>

<style scoped lang="scss">
.permission{
  height: 100vh;
  width: 100%;
}
</style>